<template>
  <div class="content-wrapper">
    <!-- <div class="content-header">个人知识库</div> -->
    <div class="content-container">
      <div class="filter-container">
        <el-button size="mini" round @click="handleCreate"
          >新建知识库<i class="el-icon-plus el-icon--right button-icon"
        /></el-button>
      </div>
      <div>
        <el-table
          height="500"
          v-loading="listLoading"
          :data="list"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="名称" min-width="200">
            <template slot-scope="{ row }">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#el-icon-allzhishiku"></use>
                </svg>
                <router-link
                  :to="{
                    path: '/document/my_repository_file/' + row.repositoryId,
                    query: { repositoryName: row.repositoryName, row: row }
                  }"
                  >{{ row.repositoryName }}</router-link
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column label="大小" prop="size" width="150px" fixed="right">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text"><i class="el-icon-more" /></el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item @click.native="detail(row.repositoryId)"
                    >设置</el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click.native="change(row)"
                    >修改</el-dropdown-item
                  > -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
    <el-drawer
      :title="textMap[drawerStatus]"
      :visible.sync="showDrawer"
      direction="rtl"
    >
      <div>
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="知识库名称" prop="repositoryName">
            <el-input v-model.trim="temp.repositoryName" />
          </el-form-item>
          <el-form-item label="简介" prop="memo">
            <el-input maxlength="200" type="textarea" v-model="temp.memo" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="drawerStatus === 'create' ? createData() : updateData()"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  pageRepository,
  saveRepository,
  updateRepository
} from '@/api/fd/repository'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import { set, get } from '@/utils/db.js'

export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      multipleSelection: [],
      list: null,
      listLoading: true,
      listQuery: {
        belongType: null,
        belongTo: null,
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
      },
      showDrawer: false,
      textMap: {
        update: '修改知识库',
        create: '新增知识库'
      },
      drawerStatus: '',
      temp: {
        repositoryId: null,
        belongType: 0,
        belongTo: null,
        repositoryName: null
      },
      rules: {
        belongTo: [
          { required: true, message: '隶属团队不能为空', trigger: 'change' }
        ],
        repositoryName: [
          { required: true, message: '知识库名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters(['userId'])
  },
  mounted() {
    this.listQuery.belongTo = this.userId
    set('TeamAdmin', true)
    //  this.isTeamAdmin(this.$route.params.userGroupId)
  },
  methods: {
    detail(id) {
      this.$router.push({
        path: '/document/my_repository_set/' + id,
        query: { id: this.$route.params.userGroupId }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList() {
      if (this.$route.params.userGroupId) {
        this.listQuery.belongType = 1
        this.listQuery.belongTo = this.$route.params.userGroupId
      } else {
        this.listQuery.belongType = 0
      }
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageRepository(this.listQuery).then((res) => {
        if (res.code === 1) {
          this.list = res.data.rows
          this.total = res.data.total
        }
        this.listLoading = false
      })
    },
    resetTemp() {
      this.temp = {
        repositoryId: null,
        belongType: 0,
        belongTo: null,
        repositoryName: null
      }
    },
    // 新增
    handleCreate() {
      this.resetTemp()
      this.drawerStatus = 'create'
      this.showDrawer = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveRepository(this.$refs['dataForm'].model).then((res) => {
            if (res.code === 1) {
              this.showDrawer = false
              this.getList()
              this.$message.success('添加成功')
            }
          })
        }
      })
    },
    // 修改
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateRepository(tempData).then((res) => {
            if (res.code === 1) {
              this.getList()
              this.showDrawer = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        }
      })
    }
  }
}
</script>
